<template>
  <el-scrollbar class="section_con1">
    <el-form :model="form" :rules="rules" ref="ruleForm" size="medium" label-width="90px" class="edit_form">
      <div v-if="form.assessmentStatus == '-2'" class="input_reset default_title">
        {{ form.assessmentTitle.replace(/[\(（].*[\)）]/g, '') }}
        <br />
        （
        <div class="input_title_box">
          <label class="input_title_label">{{ assessmentTitle }}</label>
          <input
            v-model="assessmentTitle"
            type="text"
            autocomplete="off"
            class="input_title"
            @keyup.enter="onBlurInput"
            @blur="onBlurInput" />
        </div>
        ）
      </div>
      <p class="showTitle" v-else>{{ form.assessmentTitle }}</p>
      <el-row class="time_box">
        <el-col :span="8" class="time_item">
          <span>考核单位名称：{{ form.createByOrgName }}</span>
        </el-col>
        <el-col :span="8">
          <el-select
            v-if="form.assessmentStatus == '-2'"
            v-model="form.assessmentSecondTitle"
            class="input_reset input_time"
            placeholder="请选择季度"
            @change="onSelectChange">
            <el-option v-for="item in quarterSelect" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
          <p class="showSubTitle" v-else>{{ form.assessmentSecondTitle }}</p>
        </el-col>
      </el-row>
      <div class="tips-alert">
        <i class="el-icon-warning-outline"></i>
        您所提交的内容完全保密，不会对外泄露！
      </div>
      <!-- <div class="user_li_title" v-if="form.leaders && form.leaders.length > 0">领导成员测评表</div>
      <vuedraggable class="wrapper" v-model="form.leaders" handle=".mover" chosen-class="chosen" :move="onDraggMove">
        <transition-group>
          <div v-for="(item, index) in form.leaders" :key="item.id" class="user_li">
            <div class="li_num">{{ index + 1 }}</div>
            <div class="li_con">
              <div class="name">{{ item.userName }}</div>
              <el-radio-group v-model="item.radio" class="radio_box">
                <el-radio :label="1">好</el-radio>
                <el-radio :label="2">较好</el-radio>
                <el-radio :label="3">一般</el-radio>
                <el-radio :label="4">较差</el-radio>
              </el-radio-group>
            </div>
            <div class="li_oper" v-if="['-2'].includes(form.assessmentStatus)">
              <el-tooltip class="item" effect="dark" content="移动" placement="top">
                <i class="el-icon-rank mover"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete" @click="onDel(item)"></i>
              </el-tooltip>
            </div>
          </div>
        </transition-group>
      </vuedraggable> -->
      <!-- <div class="user_li_title" v-if="form.noLeaders && form.noLeaders.length > 0">非领导成员测评表</div> -->
      <vuedraggable class="wrapper" v-model="form.noLeaders" handle=".mover" chosen-class="chosen" :move="onDraggMove">
        <transition-group>
          <div v-for="(item, index) in form.noLeaders" :key="item.id" class="user_li">
            <div class="li_num">{{ index + 1 }}</div>
            <div class="li_con">
              <div class="name">{{ item.userName }}</div>
              <el-radio-group v-model="item.radio" class="radio_box">
                <el-radio :label="1">好</el-radio>
                <el-radio :label="2">较好</el-radio>
                <el-radio :label="3">一般</el-radio>
                <el-radio :label="4">较差</el-radio>
              </el-radio-group>
            </div>
            <div class="li_oper" v-if="['-2'].includes(form.assessmentStatus)">
              <el-tooltip class="item" effect="dark" content="移动" placement="top">
                <i class="el-icon-rank mover"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete" @click="onDel(item)"></i>
              </el-tooltip>
            </div>
          </div>
        </transition-group>
      </vuedraggable>
      <!-- <div class="user_li_title" v-if="form.nonCivil && form.nonCivil.length > 0">非公务员成员测评表</div>
      <vuedraggable class="wrapper" v-model="form.nonCivil" handle=".mover" chosen-class="chosen" :move="onDraggMove">
        <transition-group>
          <div v-for="(item, index) in form.nonCivil" :key="item.id" class="user_li">
            <div class="li_num">{{ index + 1 }}</div>
            <div class="li_con">
              <div class="name">{{ item.userName }}</div>
              <el-radio-group v-model="item.radio" class="radio_box">
                <el-radio :label="1">好</el-radio>
                <el-radio :label="2">较好</el-radio>
                <el-radio :label="3">一般</el-radio>
                <el-radio :label="4">较差</el-radio>
              </el-radio-group>
            </div>
            <div class="li_oper" v-if="['-2'].includes(form.assessmentStatus)">
              <el-tooltip class="item" effect="dark" content="移动" placement="top">
                <i class="el-icon-rank mover"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete" @click="onDel(item)"></i>
              </el-tooltip>
            </div>
          </div>
        </transition-group>
      </vuedraggable> -->
    </el-form>
    <!-- 测评人员编辑弹窗 -->
    <EvaluationUsers
      v-if="visibleUsers"
      :visible="visibleUsers"
      :leader-list="form.leaders"
      :no-leader-list="form.noLeaders"
      :non-civil-list="form.nonCivil"
      @close="visibleUsers = false"
      @submit="onUserSubmit"></EvaluationUsers>
    <!-- 提示 start -->
    <XnDialog
      title="提示"
      :visible.sync="dialogConfig.collectShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="400px"
      append-to-body
      class="collect_dialog"
      @close="dialogConfig.collectShow = false">
      <template>
        <div>
          <i class="color_warning_dia el-icon-warning"></i>
          {{ dialogConfig.msg }}
        </div>
        <div class="bot_tips bot_tips_end">
          <el-button
            class="btnBorder"
            type="primary"
            @click="dialogConfig.collectShow = !dialogConfig.collectShow"
            size="small">
            {{ dialogConfig.operType == 1 ? '返回修改' : '取 消' }}
          </el-button>
          <el-button class="btnBg" type="primary" @click="onDialogBtnCheck(dialogConfig.operType)" size="small">
            确 定
          </el-button>
        </div>
      </template>
    </XnDialog>
    <!-- 提示 end -->
  </el-scrollbar>
</template>

<script>
import {
  getAssessmentDetail,
  delAssessmentPersonBcp,
  listQuarterSelect,
  updateAssessment,
  updateOrder,
  updateAssessMember,
} from '@apis/mzEvaluation.js'
import EvaluationUsers from './EvaluationUsers'
import vuedraggable from 'vuedraggable'
import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'EvaluationEdit',
  components: {
    EvaluationUsers,
    vuedraggable,
    XnDialog,
  },
  data() {
    return {
      assessmentTitle: '全部',
      form: {
        assessmentTitle: '',
        assessmentSecondTitle: '',
        createByOrgName: '',
        leaders: [],
        noLeaders: [],
        nonCivil: [],
      },
      rules: {
        name: [{ required: true, message: '请输入人员名称', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
      },
      leaderList: [],
      list: [{ name: '张三' }, { name: '李四' }],
      id: this.$route.query.id || '',
      quarterSelect: [],
      rowData: {},
      dialogConfig: {
        collectShow: false,
        msg: '确定删除？',
        operType: 0,
      },
      loading: false,
      visibleUsers: false,
    }
  },
  watch: {
    '$route.query': {
      handler(obj) {
        if (obj && obj.id) {
          this.id = obj.id
          this.initdata()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.initQuarterData()
    this.initdata()
  },
  methods: {
    /* 初始化数据 */
    initdata() {
      if (this.loading) return
      if (!this.id) return
      this.loading = true
      getAssessmentDetail({ id: this.id }).then(res => {
        this.loading = false
        const data = res.data || {}
        if (data.assessmentStatus === '-2') {
          const sInx = data.assessmentTitle.indexOf('（')
          const dInx = data.assessmentTitle.indexOf('）')
          this.assessmentTitle = sInx > -1 && dInx > -1 ? data.assessmentTitle.slice(sInx + 1, dInx) : '全部'
        }
        this.form = { ...data }
      })
    },
    /* 初始化数据 */
    initQuarterData() {
      listQuarterSelect({}).then(res => {
        const data = res.data.filter(item => {
          return !item.name.includes('2021')
        })
        this.quarterSelect = [...data]
      })
    },
    /* 监听季度切换 */
    onSelectChange() {
      this.submitrRealTimeData()
    },
    /* 失去焦点 */
    onBlurInput() {
      this.submitrRealTimeData()
    },
    /* 提交数据 */
    submitrRealTimeData() {
      // eslint-disable-next-line no-useless-escape
      const title = this.form.assessmentTitle.replace(/[\(（].*[\)）]/g, '') + `（${this.assessmentTitle}）`
      updateAssessment({
        assessmentSecondTitle: this.form.assessmentSecondTitle,
        assessmentTitle: title,
        id: this.form.id,
      }).then(res => {
        if (res.status === 200) {
          if (res.message.indexOf('成功') !== -1) {
            this.$message.success(res.message)
            this.$emit('updateTitle', title)
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },
    // 移动
    onDraggMove(e) {
      console.log(e.draggedContext)
      console.log(e.relatedContext)
      const operationId = e.draggedContext.element.id
      const targetId = e.relatedContext.element.id
      this.submitDraggData(operationId, targetId)
      // false表示阻止拖拽
      return true
    },
    submitDraggData(operationId, targetId) {
      updateOrder({
        operationId: operationId,
        targetId: targetId,
      }).then(res => {})
    },
    /* 删除 */
    onDel(item) {
      this.rowData = item
      this.dialogConfig = {
        collectShow: true,
        msg: '确定删除该成员?',
        operType: 0,
      }
    },
    // 判断二级标题是否为空、判断一级标题和二级标题是否一致
    onCheckEmpty() {
      if (!this.form.assessmentSecondTitle) {
        this.$message.warning('季度不能为空')
        return false
      } else {
        this.dialogConfig = {
          collectShow: true,
          msg: '请核对所选季度和标题所包含的时间是否一致?',
          operType: 1,
        }
      }
    },
    // 提示框点击确定
    onDialogBtnCheck(operType) {
      if (operType === 0) {
        delAssessmentPersonBcp({
          id: this.rowData.id,
        }).then(res => {
          if (res.status === 200) {
            this.$message.success(res.message)
            this.dialogConfig.collectShow = false
            this.initdata()
          }
        })
      } else if (operType === 1) {
        this.$emit('onCheckSuccess')
        this.dialogConfig.collectShow = false
      }
    },
    /* 预览 */
    onPreview() {
      this.$refs.EvaluationView.show()
    },
    /* 测评人员修改 */
    onUserSubmit({ leaders, noLeaders, nonCivil }) {
      updateAssessMember({
        assessmentId: this.id,
        leaders,
        noLeaders,
        nonCivil,
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('修改成功')
          this.visibleUsers = false
          this.initdata()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.section_con1 {
  height: 100%;
  background-color: #fff;
  padding-bottom: 10px;
  .edit_form {
    width: 85%;
    margin: 0 auto;
    font-size: 14px;
    position: relative;
    padding-bottom: 10px;
    /deep/.input_reset {
      margin: 0 auto;
      text-align: center;
      input {
        border: 1px dashed transparent;
        border-radius: 0;
        text-align: center;
        &:hover {
          border-color: #aaa;
          background: #f5f5f5;
        }
      }
      &.default_title {
        font-size: 22px;
        color: #333;
        font-weight: 600;
      }
      .input_title_box {
        display: inline-flex;
        align-items: center;
        position: relative;
        min-width: 100px;
        max-width: 100%;
        .input_title_label,
        .input_title {
          font-size: 22px;
          color: #333;
          font-weight: 600;
          line-height: 1.5;
        }
        .input_title_label {
          display: inline-block;
          vertical-align: middle;
          visibility: hidden;
        }
        .input_title {
          position: absolute;
          display: inline;
          line-height: normal;
          border-radius: inherit;
          width: 100%;
          outline: 0;
          border: 0;
          margin: 0;
          background-color: #fff;
          &:hover {
            border: 1px dashed transparent;
            border-color: #aaa;
            background: #f5f5f5;
            border-radius: 0;
          }
        }
      }
      &.input_time {
        width: 100%;
        input {
          font-size: 14px;
          color: #333;
        }
      }
    }
    .showTitle {
      text-align: center;
      font-weight: 600;
      font-size: 22px;
      color: #333;
    }
    .showSubTitle {
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
    }
    .time_box {
      margin: 20px 0;
      .time_item {
        font-size: 14px;
        display: flex;
        align-items: center;
        height: 40px;
      }
    }
    .tips-alert {
      font-size: 14px;
      display: flex;
      align-items: center;
      padding: 9px 15px;
      word-wrap: break-word;
      border-radius: 2px;
      // background-color: #FDF6EC;
      // border: 1px solid #E6A23C;
      // color: #E6A23C;
      background-color: #f2f2f2;
      color: #999;
      margin-bottom: 16px;
      i {
        margin-right: 10px;
      }
    }
    .user_li_title {
      text-align: center;
      font-size: 14px;
      color: #333;
      font-weight: 600;
      margin: 16px 0;
    }
    /*被拖拽对象的样式*/
    .user_li {
      border: solid 1px #eee;
      box-shadow: 0 0 15px 0 #eee;
      display: flex;
      align-items: center;
      padding: 15px 30px;
      color: #333;
      &:not(:last-of-type) {
        margin-bottom: 16px;
      }
      .li_num {
        font-size: 16px;
        text-align: center;
        // margin-right: 50px;
        width: 50px;
        text-align: left;
      }
      .li_con {
        flex: 1;
        display: flex;
        align-items: center;
        .name {
          width: 100px;
          font-weight: 600;
          font-size: 14px;
          color: #333;
        }
        .radio_box {
          flex: 0.9;
          display: flex;
          justify-content: space-around;
        }
      }
      .li_oper {
        flex: 0.3;
        text-align: right;
        i {
          font-size: 16px;
          color: #666;
          cursor: pointer;
          margin-left: 20px;
        }
        .mover {
          cursor: move;
        }
      }
    }
    /*选中样式*/
    .chosen {
      border: solid 1px #3089dc !important;
    }
  }
}
</style>
